<template>
  <div class="new-tab-page parkinglot-wrapper">
    <div class="page-main-title">车场配置-语音对讲<i class="return-icon" @click="back"></i></div>
    <div class="tab">
      <div
        class="tab-item"
        :class="{ active: currentTab === item }"
        v-for="(item, index) in tabData"
        @click="currentTab = item"
      >
        {{ item }}
      </div>
    </div>
    <div class="main-content">
      <div class="search-box" v-if="currentTab === '通道对讲机'">
        <el-input placeholder="请输入停车场名称" size="small" v-model.trim="searchVal" clearable>
          <template slot="prepend"
            >停车场名称</template
          >
        </el-input>

        <el-input placeholder="请输入通道名称" size="small" v-model.trim="channelNameSearchVal" clearable>
          <template slot="prepend"
            >通道名称</template
          >
        </el-input>
      </div>
      <div class="header-action">
        <el-button type="text" @click="addInterComeAccount" v-if="currentTab === '呼叫中心'"
          ><i class="el-icon-circle-plus"></i>添加对讲号码</el-button
        >

        <el-button type="text" @click="addInterComeChannelAccount" v-if="currentTab === '通道对讲机'"
          ><i class="el-icon-circle-plus"></i>添加对讲号码</el-button
        >
      </div>
      <div class="collapse-box" v-if="currentTab === '呼叫中心'">
        <div class="collapse-list" v-if="list && list.parkCloudWebPhoneGroupExtVoList.length">
          <div
            class="collapse-item"
            v-for="item in list.parkCloudWebPhoneGroupExtVoList"
            :key="item.parkCloudWebPhoneGroupVo.id"
          >
            <div class="collapse-top">
              <div class="left-info">
                <div class="info-item">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="item.parkCloudWebPhoneGroupVo.groupName"
                    placement="bottom-start"
                  >
                    <span>{{ item.parkCloudWebPhoneGroupVo.groupName }}</span>
                  </el-tooltip>
                </div>

                <div class="info-item">总机号码：{{ item.parkCloudWebPhoneGroupVo.phoneNumber }}</div>
              </div>
              <div class="action">
                <div class="show-more-icon" @click="item.isShow = !item.isShow">
                  <i class="el-icon-caret-bottom" :class="{ rotate180: item.isShow }"></i>
                </div>
                <div class="delItem-icon" @click="delGroup(item.parkCloudWebPhoneGroupVo)">
                  <i class="el-icon-close"></i>
                </div>
              </div>
            </div>
            <el-collapse-transition>
              <div class="collapse-content" v-show="item.isShow">
                <div
                  class="bd-item"
                  v-for="(citem, index) in item.parkCloudWebPhoneGroupExtensionVoList"
                  :key="citem.id"
                >
                  <div class="bd-content">
                    <div class="right-item">号码：{{ citem.phoneNumber }}</div>
                    <div class="right-item">密码：{{ citem.phonePassword }}</div>
                  </div>
                  <a href="javascript:;" class="del-icon" @click="delGroupItem(citem)">
                    <i class="el-icon-error"></i>
                  </a>
                </div>
              </div>
            </el-collapse-transition>
          </div>
        </div>
      </div>
      <div
        class="table-container"
        v-if="currentTab === '通道对讲机' && list && list.parkCloudWebPhoneParkChannelVoList"
      >
        <el-table :data="tableList" size="mini" border style="width: 100%" empty-tex="">
          <el-table-column prop="parkName" label="停车场名称" width="180"> </el-table-column>
          <el-table-column prop="parkCloudWebPhoneVo.mappingName" show-overflow-tooltip label="通道名称" width="180">
          </el-table-column>
          <el-table-column prop="parkCloudWebPhoneVo.phoneNumber" label="对讲号码"> </el-table-column>
          <el-table-column prop="parkCloudWebPhoneVo.phonePassword" label="密码"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                plain
                icon="icon-delete"
                class="ake-icon-font"
                title="删除"
                @click="delChannel(scope.row)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog
      title="添加语音对讲号码-呼叫中心"
      :visible.sync="dialogSetting.addInterComeAccountDialogVisiable"
      width="680px"
      class="zb-dialog full-select"
    >
      <div class="dialog-content">
        <el-form
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="90px"
          style="width: 410px; margin-left: 25px; margin-bottom: 10px; margin-top: 10px;"
        >
          <el-form-item label="总机名称" class="el-form-item-group">
            <el-select
              placeholder="请选择总机"
              style="width: 220px"
              :popper-append-to-body="false"
              @visible-change="interComeSelectChange"
              v-if="!createIntercomeAccount.isAdd"
              v-model.trim="createIntercomeAccount.parkCloudWebPhoneGroupAddReq.parkCloudWebPhoneGroupVo.id"
            >
              <el-option
                v-for="item in createIntercomeAccount.groupComboList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-input
              v-model.trim="createIntercomeAccount.parkCloudWebPhoneGroupAddReq.parkCloudWebPhoneGroupVo.groupName"
              v-if="createIntercomeAccount.isAdd"
              placeholder="请输入总机名称"
            ></el-input>
            <el-button
              type="primary"
              plain
              class="group-btn"
              @click="createIntercomeAccount.isAdd = true"
              v-if="!createIntercomeAccount.isAdd && createIntercomeAccount.groupComboList.length"
              >新增总机</el-button
            >

            <el-button
              type="primary"
              plain
              class="group-btn"
              @click="createIntercomeAccount.isAdd = false"
              v-if="createIntercomeAccount.isAdd && createIntercomeAccount.groupComboList.length"
              >选择总机</el-button
            >
          </el-form-item>

          <el-form-item label="分机数量">
            <el-input-number
              :min="1"
              label=""
              v-model="createIntercomeAccount.parkCloudWebPhoneGroupAddReq.extCount"
            ></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="submitAddInterComeAccount">确 定</el-button>
        <el-button size="medium" plain @click="dialogSetting.addInterComeAccountDialogVisiable = false"
          >取 消</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      title="添加语音对讲号码-通道对讲机"
      :visible.sync="dialogSetting.addInterComeAccountChannelDialogVisiable"
      width="680px"
      class="zb-dialog full-select"
    >
      <div class="dialog-content">
        <el-form
          size="small"
          class="zb-form-dialog"
          label-position="left"
          label-width="90px"
          style="width: 410px; margin-left: 25px; margin-bottom: 10px; margin-top: 10px;"
        >
          <el-form-item label="对应通道">
            <div class="channle-list">
              <el-tree
                node-key="id"
                :default-checked-keys="createIntercomeAccount.channelIds"
                :props="createIntercomeAccount.defaultProps"
                :data="createIntercomeAccount.webPhoneChannelList"
                show-checkbox
                ref="channelTree"
              >
              </el-tree>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="medium" @click="submitAddInterComeChannelAccount">确 定</el-button>
        <el-button size="medium" plain @click="dialogSetting.addInterComeAccountChannelDialogVisiable = false"
          >取 消</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import pageScript from './interCome.js';
export default pageScript;
</script>

<style lang="less" scoped>
@import './interCome.less';
</style>
